<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mydemo</title>
    <style type="text/css">
        body,ul,li,a,p {margin:0;padding:0;}
        li {list-style-type:none;}
        li a {text-decoration:none;}
        p {display:none;}
        
        /* 外层盒子样式 */
        #outer {width:500px;margin:10px auto;}
        /* 列表样式 */
        #month {width:400px;margin:0 auto;background:#d6cdcd;padding:0 0 10px 10px;overflow:hidden;zoom:1;text-align:center;}
        /* li标签样式 */
        #month li {width:68px;height:68px;border:1px solid black;margin:10px 10px 0 0;float:left;padding:10px;font-size:25px;font-weight:800;color:white;background:black;cursor:pointer;}
        #month li span {display:block;}
        #month li.liCurrent {color:red;background:white;}
        /* 下层盒子样式 */
        #bottom {width:390px;margin:0 auto;border:10px solid #d6cdcd;border-top:0;font-size:25px;}
        #bottom p span {font-weight:800;}
        .pCurrent {display:block;border:1px solid white;background:#867676;}
    </style>
    <script type="text/javascript">
    window.onload = function() {
        /*获取列表和信息段*/
        var oLi = document.getElementById("month").getElementsByTagName("li");
        var oP = document.getElementsByTagName("p");
        /* 鼠标事件 */
        for (var i=0;i<oLi.length;i++) {
            oLi[i].index = i;
            oLi[i].onmouseover = function() {
                /* 列表样式变化 */
                for (var x in oLi) oLi[x].className = ""
                this.className = "liCurrent"
                /*信息段样式变化 */
                for (var y in oP) oP[y].className = ""
                oP[this.index].className = "pCurrent"
            }
        }
    }
    </script>
    
</head>
<body>
<div id="outer">
    <ul id="month">
        <li><span>1</span>JAN</li>
        <li><span>2</span>FER</li>
        <li><span>3</span>MAR</li>
        <li><span>4</span>APR</li>
        <li><span>5</span>MAY</li>
        <li class="liCurrent"><span>6</span>JUN</li>
        <li><span>7</span>JUL</li>
        <li><span>8</span>AUG</li>
        <li><span>9</span>SEP</li>
        <li><span>10</span>OCT</li>
        <li><span>11</span>NOV</li>
        <li><span>12</span>DEC</li>
    </ul>
    <div id="bottom">
        <p><span>1月节日</span>元旦：1月1日至3日放假三天</p>
        <p><span>2月节日</span>2月2日至8日放假7天。</p>
        <p><span>3月节日</span>妇女节：3月8日妇女节，与我无关。</p>
        <p><span>4月节日</span>清明节：4月3日至5日放假3天</p>
        <p><span>5月节日</span>劳动节：4月30日至5月2日放假3天。</p>
        <p class="pCurrent"><span>6月节日</span>端午节：6月4日至6日放假3天。</p>
        <p><span>7月节日</span>小暑：7月7日小暑。不放假。</p>
        <p><span>8月节日</span>七夕节：8月6日七夕节。不放假。</p>
        <p><span>9月节日</span>中秋节：9月10日至12日放假3天。</p>
        <p><span>10月节日</span>国庆节：10月1日至7日放假7天。</p>
        <p><span>11月节日</span>立冬：11月8日立冬。不放假</p>
        <p><span>12月节日</span>艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。</p>
    </div>
</div>
</body>
</html>